<link rel="stylesheet" href="/css/wf-style.css" />
<header class="header">
	<div class="content">
		<p>Resize the browser to see the responsive the effect</p>
		<div class="form-inline">
			<div class="form-group">
				<label>Box size</label>
				<input type="text" class="form-control" name="resize" placeholder="Size">
			</div>
			<button class="btn btn-default resize-btn">Submit</button>
		</div>
	</div>
</header>
<section>
	<div class="wf-container">
		<% wtfs.forEach(function(item) { %>
		<div class="wf-box">
			<img src="/img/waterfall/<%=item.url%>">
			<div class="content">
				<label><%=item.name%></label>
				<p>Content Here</p>
			</div>
		</div>
		<%});%>
	</div>
</section>
<script src="/js/responsive_waterfall.js" type="text/javascript"></script>
<script src="/js/other/waterfall.js" type="text/javascript"></script>
<script>
	var wtfs = JSON.parse('<%-JSON.stringify(locals.wtfs)%>');
	initWaterfall();
</script>